<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <!-- 引入组件库 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        h3 a{
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
<h3>
    <a href="">激光码</a>
</h3>
<div id="users">

    <el-row>
        订单号：<el-input v-model="input"  placeholder="请输入订单号" style="width: 280px"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="chaxun">查询</el-button><br>
        <el-button type="warning"  @click="saveTorder" >生成激光码</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="delAll">批量删除</el-button>
    </el-row>

    <el-dialog title="生成激光码" :visible.sync="dialogFormVisible" @close="closeDialog">
        <!--        和user对象对应-->
        <el-form :model="Order2">
            <el-form-item label="订单编号">
                <el-input v-model="this.orderId" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="savazumaId">确 定</el-button>
        </div>
    </el-dialog>
    <el-table
            @select="selectTable"
            ref="tprinterTable"
            :data="Order2s"
            style="width: 100%">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                label="订单编号"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <!--scope.row.id 固定搭配-->
                <span style="margin-left: 10px">{{ scope.row.orderId }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="产品名称"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.product.pname }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="订单金额"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.money }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="交易时间"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.dealTime }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="所属分类"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.product.penterprise }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="数量"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.number }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="激光码"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.laserCode }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
            <template slot-scope="scope">
                <el-popconfirm>
                            <el-button
                            size="mini" type="success"
                            v-if="scope.row.laserCode==-1?'':'disabled' "
                            slot="reference"
                            @click="aaa">
                                分配打印机
                            </el-button>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <!--    //分页的下角标-->
    <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="current">
    </el-pagination>
</div>


<script>
    new Vue({
        el:"#users",
        data(){
            return{
                dialogTreeVisible:false,
                dialogFormVisible:false,
                //集合
                total:0,
                current:1,
                pageSize:10,
                number:0,
                currentRow:null,
                Order2s:[],
                Order2:{},
                num: 0,
                orderId:0,
                // randomNum:0,
                // 配置子节点和节点的显示属性
                defaultProps:{
                    label: 'name'
                },
                selectAll:[],
                input:"",
                tOrder:{},
                id:"",
            }
        },
        methods:{

            loadTOrder(){
                axios.get("/Order2s/page?current=" + this.current )
                    .then(res =>{
                        this.Order2s = res.data.data;
                        console.log(this.Order2s);
                        console.log(this.Order2s[0].product.pname);
                        this.total = res.data.total;
                        this.current = res.data.current;
                    })
            },
            // 通过订单编号查询激光码
            chaxun() {
                // this.flag = 1;
                if(this.input==""){
                    this.loadTOrder();
                }else{
                    axios.get("/Order2zb/" + this.input)
                        .then(res => {
                            this.Order2s = res.data;
                        });
                }

            },
            currentChange(current){
                this.current=current;
                this.loadTOrder();
            },
            handleEdit(index, row) {
                this.tOrder=JSON.parse(JSON.stringify(row));
                //开模态框
                this.dialogFormVisible=true;
                this.number=1;
            },
            delAll() {
                let ids=new Array();
                this.selectAll.forEach(select=>{
                    console.log(select.id)
                    ids.push(select.id)
                });
                axios.delete("/Order2s/" + ids)
                    .then(res =>{
                        if(res.data=="ok"){
                            this.loadTOrder();
                        }
                    })
            },
             selectTable(selection){
                 this.selectAll=selection;
             },

            //关闭模态框时 清空数据
            closeDialog(){
                this.tOrder =  {id:0,pNum:"",pServer:"",pDesctib:"",pIp:"",pLine:"",pRemark:""}
            },
            savazumaId(){
                 axios.put("/Order2_zumaid/"+this.orderId)
                .then(res =>{
                    if (res.data == "ok") {
                        this.dialogFormVisible = false;
                        this.loadTOrder();
                    }
                });
            },

            aaa(){
                location.href="../tlaser/tlaserList.html"
            },
//
            handleEdit(selectAll) {
                console.log("进入这个方法了")
                selectAll.forEach(select=>{
                    this.orderId = select.orderId
                });
               // this.randomNum  = Math.round(Math.random()*100)
               //  console.log( this.randomNum);
                //开模态框
                this.dialogFormVisible=true;
            },

            saveTorder(){
                this.selectAll.forEach(select=>{
                    this.id = select.id
                });
                    axios.put("/Order2/"+this.id)
                        .then(res => {
                            if (res.data == "ok") {
                                this.handleEdit(this.selectAll);
                                // this.dialogFormVisible = false;
                                this.loadTOrder();
                            }
                        });
            },

        },
        mounted(){
            this.loadTOrder();
        }
    })
</script>
</body>
</html>